<!--
 * @Author: ltl
 * @Date: 2023-8-22 15:05:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-8-22 15:05:07
 * @Description:
-->
<!-- Applicationarea公共组件 -->
<template>
  <div class="Applicationarea">
    <div v-for="(item, index) in datas.setStyle.imageList" :key="index" class="Applicationarea_box">
      <div class="app_sectionName">
        {{ item.sectionName }}
      </div>
      <div class="app_data">
        <div v-for="(item2, index2) in item.application" :key="index2">
          <div class="app_option" v-if="goIf(item2)" @click="goJinGang(item2.url)">
            <img :src="item2.src" alt="">
            <span class="name">{{ item2.text }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLink } from '../../common/comfun';
import { Toast } from 'yj-mob-ui';
export default {
   components: {
    [Toast.name]: Toast
  },
  props: {
    datas: {
      type: Object
    },
    vipData: {
      type: Object
    }
  },
  data () {
    return {
    };
  },
  async created () {
  },
  methods: {
    goIf (item2) {
      return (this.vipData.suitesState === '1' || this.vipData.suitesState === '2') ? (item2.isVip === 0 || item2.isVip === 1) : item2.isVip === 0;
    },
    goJinGang (url) {
      if (getLink(url)) {
        var goUrl = getLink(url);
        if (goUrl.indexOf('&cuparam') !== 0) {
          goUrl = getLink(url).split('&cuparam')[0] + '?H5=1';
          // goUrl = getLink(url).split('&cuparam')[0];
        }
        window.location.href = goUrl;
      } else {
        this.$toast('暂无跳转链接');
      }
    }
  }
};
</script>

<style lang="scss">
.Applicationarea{
  margin: 0 18px;
  background-color: #fff;
  border-radius: 12px;
  .Applicationarea_box{
    padding: 16px 0;
    box-sizing: border-box;
    .app_sectionName{
      margin: 0 16px 16px;
      font-size: 17px;
      font-family: PingFangSC-Medium, PingFang SC, sans-serif;
      font-weight: 600;
    }
    .app_data{
      display: flex;
      flex-direction: row;
      .app_option{
        min-width: 82px;
        text-align: center;
        img{
          width: 38px;
          height: 38px;
          vertical-align: middle;
        }
        .name{
          margin-top: 7px;
          font-size: 13px;
          display: block;
          vertical-align: middle;
          color: #333333FF;
        }
      }
    }
  }
}
</style>
